<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🍽️ 今天吃什么 - 可爱抽奖转盘</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 标题区域 -->
        <header class="header">
            <h1 class="title">🍽️ 今天吃什么呀？</h1>
            <p class="subtitle">让可爱的转盘帮你决定吧～</p>
        </header>

        <!-- 转盘区域 -->
        <div class="wheel-container">
            <div class="wheel-wrapper">
                <div class="wheel" id="wheel">
                    <!-- 转盘扇形区域将由JavaScript动态生成 -->
                </div>
                <div class="wheel-pointer">
                    <div class="pointer"></div>
                </div>
            </div>
        </div>

        <!-- 控制区域 -->
        <div class="controls">
            <div class="input-section">
                <h3>🥢 自定义菜品</h3>
                <div class="input-group">
                    <input type="text" id="customFood" placeholder="输入你想吃的菜～" maxlength="10">
                    <button id="addFood" class="btn-add">添加</button>
                </div>
            </div>

            <div class="default-foods">
                <h3>🍜 默认菜品</h3>
                <div class="food-tags" id="defaultFoods">
                    <!-- 默认菜品标签将由JavaScript生成 -->
                </div>
            </div>

            <button id="spinBtn" class="spin-button">
                <span class="btn-text">开始抽奖</span>
                <span class="btn-emoji">🎲</span>
            </button>
        </div>

        <!-- 结果显示区域 -->
        <div class="result-section" id="resultSection">
            <div class="result-card">
                <h3>🎉 抽奖结果</h3>
                <div class="result-food" id="resultFood"></div>
                <div class="result-time" id="resultTime"></div>
            </div>
        </div>

        <!-- 历史记录 -->
        <div class="history-section">
            <h3>📝 上次抽奖</h3>
            <div class="last-result" id="lastResult">
                <p>还没有抽奖记录哦～</p>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>